 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        .carousel{
            position: relative;
            width: 880px;
            height: 550px;
            border: 1px solid #333;
            margin: 50px auto;
        }
        .pic li{
            position: absolute;
            left: 0;
            top: 0;
            width: 880px;
            height: 550px;
            display: none;
        }
        .pic li.current{
            display: block;
        }
        .btn a{
            position: absolute;
            top: 50%;
            width: 80px;
            height: 80px;
            margin-top: -40px;
            background-color: rgba(255,255,255,0.3);
            text-decoration: none;
            color: #444;
            text-align: center;
            line-height: 80px;
            font-size: 60px;
            font-family: "SimSun";
        }
        .btn .left{
            left: 10px;
        }
        .btn .right{
            right: 10px;
        }
        .btn a:hover{
            background-color: rgba(255,255,255,0.7);
        }
        .sub{
            position: absolute;
            bottom: 30px;
            left: 50%;
            width: 200px;
            height: 40px;
            margin-left: -100px;
            border-radius: 20px;
            background-color: rgba(255,255,255,0.3);
        }
        .sub li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 10px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
        .sub li.current{
            background-color: #0ff;
        }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <ul class="pic" id="pic">
            <li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
            <li><img src="images/lunbo/02.jpg" alt=""></li>
            <li><img src="images/lunbo/03.jpg" alt=""></li>
            <li><img src="images/lunbo/04.jpg" alt=""></li>
            <li><img src="images/lunbo/05.jpg" alt=""></li>
        </ul>
        <div class="btn" id="btn">
            <a href="javascript:;" class="left" id="leftbtn">&lt;</a>
            <a href="javascript:;" class="right" id="rightbtn">&gt;</a>
        </div>
        <ol class="sub" id="sub">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ol>
    </div>
    <script src="js/common.js"></script>
    <script>
        // 1.获取元素
        var carousel = my$("carousel");
        var ul = my$("pic");
        var ulLis = ul.children;
        var leftbtn = my$("leftbtn");
        var rightbtn = my$("rightbtn");
        var ol = my$("sub");
        var olLis = ol.children;

        // 定一个全局变量当作信号量
        var idx = 0;

        // 2.点击右按钮切换到下一张图片
        rightbtn.onclick = function(){
            idx++;
            // 如果不进行判断到最后一个成为空白
            // 进行判断,如果信号量超过ul的下标,那么点击右按钮时切换到第一张(idx的数值与图片的下标量的数字相同,从零开始循环)
            if(idx>ulLis.length-1){
                idx = 0;
            }
            change();
        //     // 点击右按钮让所有的ul和ol中的li  类名不成为当前显示(排他)
        //     for(var i = 0; i<ulLis.length;i++){
        //         ulLis[i].className = "";
        //         olLis[i].className = "";
        //     } 
        //     // 保留自己
        //     ulLis[idx].className = "current";
        //     olLis[idx].className = "current";

        }
        // 3.点击左按钮切换到上一张图片
        leftbtn.onclick = function(){
            idx--;
            // 如果不进行判断到第一个成为空白(因为是从最后一个图片往前走)
            // 进行判断,如果信号量小于0,那么点击右按钮时切换到最后一张(idx的数值与图片的下标量的数字相同,从ulLis开始循环)
            if(idx<0){
                idx = ulLis.length-1;
            }
            change();
        //     // 点击右按钮让所有的ul和ol中的li  类名不成为当前显示(排他)
        //     for(var i = 0; i<ulLis.length;i++){
        //         ulLis[i].className = "";
        //         olLis[i].className = "";
        //     } 
        //     // 保留自己
        //     ulLis[idx].className = "current";
        //     olLis[idx].className = "current";
        }

           
        // 由于第二个步骤与第三个步骤的for循环后面的相同可以封装为一个函数直接拿来使用
            function change(){
                for(var i = 0; i<ulLis.length;i++){
                    ulLis[i].className = "";
                    olLis[i].className = "";
                } 
                // 保留自己
                ulLis[idx].className = "current";
                olLis[idx].className = "current";
            }


        // 4.点击圆点展示相同信号量的图片
        // 点击每个圆点,切换为相同信号量的图片(idx的数值等于图片的下标量的数字,从零开始一直到结束)
        for(var i = 0; i<olLis.length;i++){
            // 定义下标位置的属性等于ol的下标位置
            olLis[i].index = i;
            olLis[i].onclick = function(){
                idx = this.index;
                change();
            } 
        }

        // 5.轮播图自动播放  自动切换到下一张图片然后又从下标为零开始循环
        // 此处与右按钮效果一致因此使用右按钮函数事件进行封装函数
        var timer;
        timer = setInterval(rightHandle,2000);
        
        // 右按钮函数事件进行封装函数
        function rightHandle(){
            idx++;
            // 如果不进行判断到最后一个成为空白
            // 进行判断,如果信号量超过ul的下标,那么点击右按钮时切换到第一张(idx的数值与图片的下标量的数字相同,从零开始循环)
            if(idx>ulLis.length-1){
                idx = 0;
            }
            change();
        }

        // 6.鼠标移到图片,图片停止自动切换
        carousel.onmouseover = function(){
            clearInterval(timer);
        }
        // 7.鼠标移出图片,图片开始重新自动切换
        carousel.onmouseout = function(){
            timer = setInterval(rightHandle,2000);
        }
    </script>
   
</body>
</html>